/*
 * @Author: your name
 * @Date: 2020-07-24 22:34:58
 * @LastEditTime: 2020-07-24 22:54:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \react_app\src\todoListUi.js
 */
import React from 'react'
import PropTypes from 'prop-types'
import {Input,Button,List} from 'antd'
import 'antd/dist/antd.css'
const TodoListUi = (props) => {
  return (
    <div style={{ width: '1000px', margin: '100px auto' }}>
      <div>
        <Input
          placeholder={props.inputValue}
          style={{ width: '400px', marginRight: '10px' }}
          onChange={props.changeInputValue}
          value={props.inputValue}
        />
        <Button type="primary" onClick={props.addTodo}>增加</Button>
      </div>
      <div style={{ width: '470px', marginTop: '10px' }}>
        <List
          bordered
          dataSource={props.todoList}
          renderItem={item => (<List.Item>{item}</List.Item>)}
        />
      </div>
    </div>
  );
}

TodoListUi.propTypes = {
  inputValue:PropTypes.string.isRequired,
  changeInputValue: PropTypes.func.isRequired,
  todoList: PropTypes.array.isRequired,
  addTodo:PropTypes.func.isRequired
}
TodoListUi.defaultProps = {
  inputValue: "hello world",
  changeInputValue:function(){},
  todoList:[],
  addTodo:function(){}
}
export default TodoListUi
